<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

</head>
<body>
<div id="app">
    <form class="panel-body form-inline">
        <label for="id">ID</label>
        <input type="text" name="id" id="id" v-model:value="id">

        <label for="name">NAME</label>
        <input type="text" name="name" id="name" v-model="name" @keyup.f2="add">

        <input type="button" class="btn btn-primay" name="button" value="添加" @click="add">

        <label for="search">搜索名称关键字：</label>
        <input type="text" name="search" id="search" @click="searchName(keywords)" v-model="keywords" v-focus v-color="'#f00'">
    </form>
    <table class="table table-bordered table-hover table-striped">
        <tr>
            <th>id</th>
            <th>品牌名称</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        <!-- 使用js添加后续的tr -->
        <tr v-for="li in searchName(keywords)" :key="li.id">
            <td>{{li.id}}</td>
            <td>{{li.name}}</td>
            <td>{{li.ctime | filterTime}}</td>
            <td><a href="#" @click.prevent="del(li.id)">{{li.del}}</a></td>
        </tr>
    </table>
</div>


<script type="text/javascript">
Vue.filter("filterTime", function(datestr, pattern=""){
    var dt = new Date(datestr);
    var y = dt.getFullYear();
    var m = (dt.getMonth() + 1).toString().padStart(2,"0");
    var d = dt.getDate().toString().padStart(2,"0").toString().padStart(2,"0").toString().padStart(2,"0").toString().padStart(2,"0");
    // return y+"-"+m+"-"+d
    if(pattern.toLowerCase() === "yyyy-mm-dd") {
        return `${y}-${m}-${d}`;
    } else {
        var hh = dt.getHours().toString().padStart(2,"0").toString().padStart(2,"0").toString().padStart(2,"0");
        var mm = dt.getMinutes().toString().padStart(2,"0").toString().padStart(2,"0");
        var ss = dt.getSeconds().toString().padStart(2,"0");
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
})
Vue.config.keyCodes.f2 = 113;
Vue.directive("focus", {
    inserted: function(el) {
        el.focus();
    }
});
Vue.directive("color", {
    bind: function(el, a) {
        
        console.log(a.value.update)
    }
})
var vm = new Vue({
    el: "#app",
    data: {
        list: [
        {id:1, name:"a", ctime: new Date(), del: "删除"},
        {id:2, name:"b", ctime: new Date(), del: "删除"}
        ],
        id: "",
        name: "",
        keywords: ""
    },
    methods: {
        add() {
            var x = {id: this.id, name: this.name, ctime: new Date(), del: "删除"};
            this.list.push(x)
        },
        searchName(keywords) {
            // var newList = [];
            // this.list.forEach(li => {
            //     if(li.name.indexOf(keywords) != -1) {
            //         newList.push(li);
            //     }
            // })
            // return newList;
            
            return this.list.filter(li => {
                if(li.name.includes(keywords)){
                    return li;
                }
            });
        },
        del(id) {
            // this.list.some((li, i) => {
            //     if(li.id == id) {
            //         this.list.splice(i,1);
            //         return true;
            //     }
            // });
            
            // var index = this.list.findIndex(li => {
            //     if(li.id == id) {
            //         return true;
            //     }
            // });            
            // this.list.splice(index, 1)
        }
    }
});

// document.getElementById("search").focus()
</script>
</body>
</html>